<template>
<div>
    <!-- 首页图片区 -->
<van-row type="flex" justify="center" align="center" class="homeBgc">
    <van-col span="22">
    <!-- 首页图片 -->
    <van-image
    scale-down
    class="homeImg"
    src="https://img01.yzcdn.cn/vant/cat.jpeg"
/>
    </van-col>
</van-row>
<!-- /首页图片区 -->
<!-- 宫格导航1 -->
<van-grid :column-num="3" gutter="10" center clickable class="homeGrid">
    <van-grid-item v-for="v in list" :key="v"  :text="v" />
</van-grid>
<!-- /宫格导航1 -->
<!-- 列表导航 -->
<ul class="homeGrid2">
    <li v-for="(v,i) in data" :key="i">
        <van-image
        round
        cover
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <span>{{v}}</span>
    </li>
</ul>
<!-- /列表导航 -->
</div>
</template>

<script>
import {homeGird,companyKey} from '@/api/home.js'
export default {
    name: 'Home',
    props: {

    },
    components: {

    },
    data () {
        return {
        list:[],//宫格数据
        data:[]//分类数据
        }
    },
    computed: {

    },
    created () {
        // 获取宫格数据
        this.homeGird()
        //获取分类数据
        this.companyKey()
    },
    mounted () {

    },
    methods: {
        // 获取宫格数据
        async homeGird(){
        const {data:{data}} =   await homeGird()
        this.list=data.list
        },
        // 获取分类列表数据
        async companyKey(){
            const {data:{data:{data}}}=await companyKey()
            
            this.data=data.filter(v=>v!=='全部职业')
        }
    }
}
</script>

<style lang="scss" scoped>
.homeBgc{
    background-color: #3f51b5;
    padding-bottom: 10px;
}
.homeImg{
    width: 100%;
    height: 100%;
}
.homeGrid{
    margin-top: 15px;
}
.homeGrid2{
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:10px;
    li{
        flex: 25%;
        .van-image{
        margin-left: 5px;
        margin-right: 5px;
        padding: 5px;
    }
    span{
        padding: 5px 0 5px 0;
        font-size: 14px;
    }
    }

}
</style>
